<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>My App</title>
    <link rel="stylesheet" href="../../packages/core/css/framework7.min.css">
    <link rel="stylesheet" href="../../css/framework7-icons.css">
  </head>
  <body>
    <div id="app"></div>
    <template id="app-template">
      <f7-app>
        <f7-view main>
          <f7-page>
            <f7-navbar title="Radio"></f7-navbar>
      
            <f7-block-title>Inline</f7-block-title>
            <f7-block strong>
              <p>Lorem <f7-radio name="demo-radio-inline"></f7-radio> ipsum dolor sit amet, consectetur adipisicing elit. Alias beatae illo nihil aut eius commodi sint eveniet aliquid eligendi <f7-radio name="demo-radio-inline" checked></f7-radio> ad delectus impedit tempore nemo, enim vel praesentium consequatur nulla mollitia!</p>
            </f7-block>
      
            <f7-block-title>Radio Group</f7-block-title>
            <f7-list>
              <f7-list-item radio checked title="Books" name="demo-radio" checked></f7-list-item>
              <f7-list-item radio title="Movies" name="demo-radio"></f7-list-item>
              <f7-list-item radio title="Food" name="demo-radio"></f7-list-item>
              <f7-list-item radio title="Drinks" name="demo-radio"></f7-list-item>
            </f7-list>
      
            <f7-block-title>With Media Lists</f7-block-title>
              <f7-list media-list>
                <f7-list-item
                  radio
                  checked
                  name="demo-media-radio"
                  value="1"
                  title="Facebook"
                  after="17:14"
                  subtitle="New messages from John Doe"
                  text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
                ></f7-list-item>
                <f7-list-item
                  radio
                  name="demo-media-radio"
                  value="2"
                  title="John Doe (via Twitter)"
                  after="17:11"
                  subtitle="John Doe (@_johndoe) mentioned you on Twitter!"
                  text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
                ></f7-list-item>
                <f7-list-item
                  radio
                  name="demo-media-radio"
                  value="3"
                  title="Facebook"
                  after="16:48"
                  subtitle="New messages from John Doe"
                  text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
                ></f7-list-item>
                <f7-list-item
                  radio
                  name="demo-media-radio"
                  value="4"
                  title="John Doe (via Twitter)"
                  after="15:32"
                  subtitle="John Doe (@_johndoe) mentioned you on Twitter!"
                  text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
                ></f7-list-item>
              </f7-list>
          </f7-page>
        </f7-view>
      </f7-app>
      
    </template>
    <script>var component = {}</script>
    <script src="../../packages/vue/vue.min.js"></script>
    <script src="../../packages/vue/framework7-vue.min.js"></script>
    <script src="../../packages/core/js/framework7.min.js"></script>
    <script>
      var theme = 'ios';
      if (location.href.indexOf('theme=md') >= 0) theme = 'md';
      
      if (Framework7.use) Framework7.use(Framework7Vue, { theme: theme });
      else if (Framework7.Class && Framework7.Class.use) Framework7.Class.use(Framework7Vue, { theme: theme });
      
      var plugin = {
        params: {
          theme: theme,
        }
      };
      
      if (Framework7.use) Framework7.use(plugin);
      else if (Framework7.Class && Framework7.Class.use) Framework7.Class.use(plugin);
      
      if (typeof component === 'undefined') {
        var component = {};
      }
      if (typeof routes === 'undefined') {
        var routes = [];
      }
      component.el = '#app';
      component.template = '#app-template';
      
      new Vue(component);
    </script>
  </body>
</html>